<template>
  <div class="ranklist-detail">
    <div class="player">
      <img :src="rankInfo.picUrl" alt />
      <span>{{rankInfo.title}}</span>
      <span>{{rankInfo.titleDetail}}</span>
      <span>更新时间：{{updateTime}}</span>
      <van-button type="primary">播放</van-button>
    </div>
    <div class="ranklist">
      <ul>
        <li v-for="(item,id) in rankList" :key="item.id" @click="selectSong(item)">
          <span>{{id+1}}.{{item.name}}</span>
          <span>{{item.singerName}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      rankList: [], //榜单详情列表
      rankInfo: {}, //榜单基本信息
      updateTime: "", //榜单更新时间
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      axios
        .get("/jsososo/top", {
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          console.log(res.data);
          this.rankList = res.data.data.list; //榜单详情列表
          this.rankInfo = res.data.data.info; //榜单基本信息
          this.updateTime = res.data.data.update; //榜单更新时间
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectSong(item) {
      const id = item.mid;
      this.$router.push({ path: `/player/${id}` });
      this.$store.commit("setSinger", item);
    },
  },
};
</script>
<style scoped>
.player img {
  width: 50%;
  border-radius: 1rem;
}
.player span {
  display: block;
}
.ranklist li {
  text-align: left;
  margin: 1rem;
}
.ranklist span {
  display: block;
}
</style>